<template>
  <div class="card-item-menu" @click.stop>
    <template v-for="i in topMenuSize - 1">
      <div v-if="realMenuList[i-1]" :key="i" class="card-item-menu-item-top" :style="{width:topMenuWidth}" @click="click(realMenuList[i-1].name)">
        <!-- <i v-if="realMenuList[i-1].icon" :class="realMenuList[i-1].icon"></i> -->
        <app-icon v-if="realMenuList[i-1].icon" :iconName="realMenuList[i-1].icon"></app-icon>
        <span>{{realMenuList[i-1].name}}</span>
      </div>
    </template>

     <div v-if="realMenuList.length===topMenuSize" class="card-item-menu-item-top" :style="{width:topMenuWidth}" @click="click(realMenuList[topMenuSize-1].name)">
      <!-- <i v-if="realMenuList[topMenuSize-1].icon" :class="realMenuList[topMenuSize-1].icon"></i> -->
      <app-icon v-if="realMenuList[topMenuSize-1].icon" :iconName="realMenuList[topMenuSize-1].icon"></app-icon>
      <span>{{realMenuList[topMenuSize-1].name}}</span>
    </div>
    <el-popover
      v-if="realMenuList.length>topMenuSize"
      v-model="popoverShow"
      class="card-item-menu-item-top"
      :class="{'card-item-menu-item-top-hover':popoverShow}"
      :style="{width:topMenuWidth}"
      popper-class="card-item-menu-item-popper"
      placement="bottom-start"
      :popper-options="{
        positionFixed:true
      }"
      :open-delay="210"
      :close-delay="100"
      :visible-arrow="false"
      @show="$emit('show')"
      @hide="$emit('hide')"
      width="160"
      trigger="hover">
      <div class="card-item-menu-item-popper-menu-list">
        <div v-for="(item,j) in realMenuList.slice(topMenuSize - 1)" :key="j" class="card-item-menu-item-popper-menu-list-item" @click="click(item.name)">
          <hr v-if="j!==0&&realMenuList[topMenuSize - 1 + j].group!==realMenuList[topMenuSize - 1 + j -1].group" size="1"/>
          <div>{{item.name}}</div>
        </div>
      </div>
      <div slot="reference">
        <app-icon iconName="vcloud-gengduocaozuo-kongxin"></app-icon>
        <span>更多</span>
      </div>
    </el-popover>
  </div>
</template>

<script>
    export default {
        name: "CardItemMenu",
        props: ["info","menuList","menuNameFilter"],
        data(){
          return {
            topMenuSize:4,
            popoverShow:false,
            realMenuList:[]
          }
        },
        watch:{
          menuList:{
            handler(val){
              if(!this.menuNameFilter){
                this.realMenuList = this.menuList
                return
              } 
              const realMenuListName = this.menuNameFilter(this.menuList.map(it=>it.name),this.info)
              this.realMenuList = this.menuList.filter(it=>{
                return realMenuListName.includes(it.name)
              })
            },
            immediate:true
          }
        },
        computed:{
          topMenuWidth(){
            if(this.topMenuSize > this.realMenuList.length){
              return 100/this.realMenuList.length+'%' 
            }
            return 100/this.topMenuSize+'%'
          }
        },
        methods:{
          click(name){
            this.$emit('menuClick',name)            
          }
        }
    };
</script>

<style lang="scss">
.el-popover.card-item-menu-item-popper{
  margin: 0 !important;
  padding: 7px 0px;
  border: none;
  .card-item-menu-item-popper-menu-list{
    .card-item-menu-item-popper-menu-list-item{
      hr{
        margin: 3px 13px;
        background-color:#8C8C8C;
        height:1px;
        border:none;
      }
      div{
        padding: 0 13px;
        height: 30px;
        line-height: 30px;
        font-size:12px;
        font-weight:600;
        color:rgba(0,0,0,1);
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      div:hover{
        background:rgba(51,108,251,1);
        color: #FFFFFF;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.card-item-menu{
  width: 100%;
  .card-item-menu-item-top.card-item-menu-item-top-hover .el-popover__reference{
    color: #336CFB;
  }
  .card-item-menu-item-top,
  .card-item-menu-item-top .el-popover__reference{
    font-size:12px;
    font-weight:400;
    color:rgba(52,67,101,1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    align-items: center;
    &:hover{
      color: #336CFB;
    }
    svg{
      width: 17px;
      height: 17px;
    }
    span{
      height: 16px;
      line-height: 16px;
      margin-top: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

</style>